<template>
	<view>
		<view class="container">
			<cu-custom bgColor="bg-gradual-orange" :isBack="true">
				<block slot="content">权益订单</block>
			</cu-custom>
			
			<view class="content">
				<view style="margin-top: 30rpx;background-color: #fff;;padding: 20rpx;border-radius: 20rpx;" v-for="(item,index) in applyList" :key="index">
					<view class="" style="display: flex;justify-content: space-between;font-size: 30rpx;">
						<view>订单号：{{item.order_sn}}</view>
						<view style="color: red;font-weight: bold;">{{ changeText(item) }}</view>
					</view>
					<view style="display: flex;align-items: center;margin-top: 20rpx;">
						<image style="width: 100rpx;height: 100rpx" :src="item.icon" mode=""></image>
						<view style="display: flex;flex-direction: column;margin-left: 20rpx;">
							<view style="font-size: 32rpx;">
								{{item.title}}
							</view>
							<view style="margin-top: 20rpx;font-size:24rpx;color: #666;">
								{{item.account}}
							</view>
							<view style="margin-top: 10rpx;font-size:24rpx;color: #666;">
								订单时间：{{ item.create_time | formDates }}
							</view>
							<view style="margin-top: 10rpx;font-size:28rpx;font-weight: bold;align-items: right">
								<text>总价：<text>￥{{item.pay_price}}元</text></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加载状态提示 -->
		<view class="loading-status">
			<text v-if="loadingStatus === 'loading'">加载中...</text>
			<text v-if="loadingStatus === 'noMore'">没有更多了~</text>
		</view>
	</view>
</template>

<script>
	import user from '@/api/user';
	import headerView from "../components/header/header.vue"
	export default {
		components: { headerView },
		data() {
			return {
				page: 1,
				loadingStatus: "more", // 加载状态：more|loading|noMore
				applyList:[]
			}
		},
		onReachBottom() { // 触底加载更多
			if (this.loadingStatus === 'more') {
				this.page += 1
				this.getList()
			}
		},
		onLoad() {
			this.getList();
		},
		filters: {
			formDates(times) {
				const date = new Date(times * 1000);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
		},
		computed: {
			changeText() {
				return (item) => {
					switch (item.status) {
						case '1':
							return '已结算';
						case '2':
							return '待结算';
						case '3':
							return '已取消';
						default:
							return '已取消';
					}
				};
			},
		},
		methods: {
			async getList() {
				const res = await user.getList({
					page: this.page
				});
				if (res.code === 1) {
					// 如果是第一页就覆盖数据，否则追加数据
					const newList = res.data || []
					this.applyList = this.page === 1 ? newList : [...this.applyList, ...newList],
						
					this.loadingStatus = newList.length >= 25 ? 'more' : 'noMore'
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 688rpx;
		margin: auto;
		margin-top: 100rpx;
		position: relative;
		background-color: #eee;
	}
	.loading-status {
		padding: 30rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
</style>
